{% extends "base.html" %}
{% block content %}
<div class="form-container">
  <form id="myForm" method="post" style="display: flex; align-items: center;">
    <a class="btn btn-outline-primary" style="width: 100px; margin-right: 10px;" href="/">Назад</a>
    {%csrf_token%}
    <select class="form-select" name="selected_option" value={{selected}} onchange="this.form.submit()" style="width: 200px;">
      <option value="Исполнитель" {% if selected == "Исполнитель" %}selected{% endif %}>Исполнитель</option>
      <option value="Группа тем" {% if selected == "Группа тем" %}selected{% endif %}>Группа тем</option>
    </select>
  </form>
</div>
<div id="plot_div">

    {% autoescape off %}
        {{ plot_div }}
    {% endautoescape %}
</div>
<div id="plot_time_series">

    {% autoescape off %}
        {{ time_series }}
    {% endautoescape %}
</div>

<!--<script>-->
<!--   function updatePlot(selectedOption) {-->
<!--    let formData = new FormData();-->
<!--    formData.append('selected_option', selectedOption);-->
<!--    formData.append('csrfmiddlewaretoken', document.querySelector('[name=csrfmiddlewaretoken]').value);-->
<!--    formData.append('reason', 'update_plot');-->

<!--    fetch('', {-->
<!--        method: 'POST',-->
<!--        body: formData-->
<!--    })-->
<!--    .then(response => response.json())-->
<!--    .then(data => {-->
<!--        console.log(data['plot_div'])-->
<!--        document.getElementById('plot_div').innerHTML = data['plot_div'];-->
<!--    })-->
<!--    .catch(error => {-->
<!--        console.error('Error:', error);-->
<!--    });-->
<!--}-->
</script>
{% endblock content %}
